<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<style>
			[v-cloak] {
            display: none;
        }
        table{
            border: 1px solid #e9e9e9;
            border-collapse: collapse;
            border-spacing: 0;
            empty-cells: show;
            padding: 10px;
        }
        th, td{
            border: 1px solid #e9e9e9;
            text-align: left;
            padding: 10px;
        }
        th{
            background: #f7f7f7;
            color: #5c6b77;
            font-weight: 600;
            white-space: nowrap;
            padding: 10px;
        }
    </style>
	</head>
	<body>
		<div id="app" v-cloak>
			<template v-if="list.length">
				<table>
					<thead>
						<tr>
							<th>
								<span>全选</span>
								<input type="checkbox" @click="checkedAll(),checkModel()" v-model="checked">
							</th>
							<th>编号</th>
							<th>商品名称</th>
							<th>商品单价</th>
							<th>购买数量</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(item, index) in list">
							<td>
								<input type="checkbox" :value="item.id" v-model="checkBoxModel" @click.stop="onlyChecked(index),checkPick()">
							</td>
							<td>{{ index + 1}}</td>
							<td>{{ item.name }}</td>
							<td>{{ item.price }}</td>
							<td>
								<button @click="handleReduce(index)" :disable="item.count === 1">-</button>
								{{ item.count }}
								<button @click="handleAdd(index)">+</button>
							</td>
							<td>
								<button @click="handleRemove(index)">移除</button>
							</td>
						</tr>
					</tbody>
				</table>
				<div style="margin-top: 20px;">总价：￥{{ totalPrice }}</div>
			</template>
			<div v-else>购物车为空</div>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el: '#app',
				data: {
					list: [{
							id: 1,
							name: '《我喜欢你，像风走了八千里》',
							price: 24,
							count: 1,
							checked: false
						},
						{
							id: 2,
							name: '《余生很长，别慌张，别失望》',
							price: 25.2,
							count: 1,
							checked: false
						},
						{
							id: 3,
							name: '《不堪孤独，就无法脱离庸俗》',
							price: 23.8,
							count: 1,
							checked: false
						}
					],
					checkBoxModel: [],
					checked: false
				},
				computed: {
					totalPrice: function() {
						var total = 0;
						for (var i = 0; i < this.list.length; i++) {
							if (this.list[i].checked) {
								var item = this.list[i];
								total += item.price * item.count;
							}
						}
						return total.toFixed(2);
					}
				},
				methods: {
					handleReduce: function(index) {
						if (this.list[index].count === 1) return;
						this.list[index].count--;
					},
					handleAdd: function(index) {
						this.list[index].count++;
					},
					handleRemove: function(index) {
						this.list.splice(index, 1);
					},
					//全选的实现通过checkBoxModel的状态
					checkedAll: function() {
						var _this = this;
						if (_this.checked) {
							_this.checkBoxModel = [];
							_this.checked = false;
						} else {
							_this.checkBoxModel = [];
							_this.list.forEach(function(item) {
								_this.checkBoxModel.push(item.id);
							});
							_this.checked = true;
						}
					},
					//单选的实现依靠的是checked通过click的切换实现
					onlyChecked: function(index) {
						if (this.list[index].checked) {
							this.list[index].checked = false;
						} else {
							this.list[index].checked = true;
						}
					},
					// 从遍历单个，若全部选中则全选按钮选中
					checkPick: function() {
						me = this;
						var checkedSum = 0;
						for (var i = 0; i < me.list.length; i++) {
							if (me.list[i].checked) {
								checkedSum++;
							}
						}
						if (checkedSum == me.list.length) {
							me.checked = true;
						} else {
							me.checked = false;
						}
					},
					//计算价格
					checkModel: function() {
						me = this;
						if (me.checkBoxModel.length) {
							newArr = me.checkBoxModel.concat();
							// console.log(newArr);
							// console.log(me.checkBoxModel);
							for (var i = 0; i < me.checkBoxModel.length; i++) {
								newone = newArr.shift().toString();
								console.log(newone);
								me.list[newone - 1].checked = true;
							}
						} else {
							newArr = me.checkBoxModel.concat();
							// console.log(newArr);
							for (var i = 0; i < me.list.length; i++) {
								me.list[i].checked = false;
							}
						}
						// 利用checkBoxModel的绑定的状态来分别给每个物品确认checked的状态，避免与onlyChecked的冲突
					}
				}
			});
		</script>
	</body>
</html>
